import React, { useState } from 'react';
import Taro from '@tarojs/taro';
import Skeleton from 'taro-skeleton'
import {View, Navigator, Text, Block} from "@tarojs/components";
import {GetRequest} from '../../../utils/tools';
import {ScenicGood} from '../../../utils/server.interface';
import CouponBox from "../coupon-box";
import {TARO_ENV} from "../../../constants/api";
import './product-name-car.scss';

interface ProductNameType {
  labels?: { url: string; name: string; image: string }[]
  name: string
  loading?: any
  goods: ScenicGood[]
  isSeller: number
  no?: any
  isLogin?: any
  groupDetail?: any
  shareVolume?: any
  category?: any
  goodsId?: any
  info?: any
  type?: any
  goodsLightspot?: string
  subTitle?: string
}


const ProductNameCar: React.FC<ProductNameType> = ({
                                                     shareVolume,
                                                     groupDetail,
                                                     isLogin,
                                                     category,
                                                     goodsId,
                                                     info,
                                                     goodsLightspot,
                                                     subTitle,
                                                     labels,
                                                     name,
                                                     loading,
                                                     no,
                                                     type,
                                                     refundLabels
                                                   }) => {
  const dataColor = Taro.getStorageSync('colorData');
  const [show, setShow] = useState(false);
  const shareWow = () => {
    setShow(!show)
  }
  const env = Taro.getCurrentInstance().router.params.env;
  return (
    <View>
      <View className='product-name-box'>
        <Skeleton title row={2} action loading={loading} rowHeight='40px'>
          <View className='title-box-only'>
            <View className='title'><Text selectable>{name}</Text></View>
            {subTitle && <View className={`${no ? 'subTitle' : 'm-b-big subTitle'}`}><Text selectable>{subTitle}</Text></View>}
            {info && info.goodsList && info.goodsList.length > 0 && !groupDetail &&
            <View className='countDown-box-wrapper'>
              <View className='countDown-box'>
                <View className='price-box'>
                  <View className={"price " + (loading ? "box-seat" : "")}>
                    {!!info.goodsList[0].price && <Block>
                      <Text className='symbol m-min-b font-family-price' style={`color: ${dataColor.priceColor}`}>¥</Text>
                      <Text className='number m-min-b font-family-price' style={`color: ${dataColor.priceColor}`}>{info.goodsList[0].discounts_price ? info.goodsList[0].discounts_price : info.goodsList[0].price}</Text>
                      {!!info.goodsList[0].discounts_price && <Text className='number m-min-b font-family-price no-margin-after-coupon-product' style={`color: ${dataColor.priceColor}`}><Text className='after-coupon-product'>券后价</Text></Text>}
                    </Block>}
                    {!!info.goodsList[0].discount && <Text className='product-name-car-discount' style={`background-color: ${dataColor.discountBgColor}`}><Text className='font-family-price'>{info.goodsList[0].discount}折</Text></Text> }
                    {(info.vip_price != null && info.vip_price >= 0) && <Text className='members-enjoy-wrapper' style={`border: 1px solid ${dataColor.discountBgColor};display: initial;top: 0;`}><Text className={`members-enjoy-symbol ${TARO_ENV + 'members-enjoy-symbol'}`}>￥</Text><Text className={`members-enjoy-price font-family-price ${TARO_ENV + 'members-enjoy-price'}`}>{info.vip_price}</Text><Text className='members-enjoy'>会员享</Text></Text>}
                    {!!info.goodsList[0].market_price && <Text className='window_number m-min-b font-family-price' style={`color: ${dataColor.originalPriceColor}`}>￥{info.goodsList[0].market_price}</Text>}
                  </View>
                </View>
              </View>
            </View>}
            {info && info.couponLabel && info.couponLabel.length > 0 && env != 'pc' && !groupDetail &&
            <CouponBox type={type} groupDetail={groupDetail} list={info.couponLabel} isLogin={isLogin} category={category} goodsId={goodsId} />}
            {
              !goodsLightspot && ((labels && labels.length > 0) || (refundLabels && refundLabels.length > 0)) &&
              <View className='labels nogoodsLightspot'>
                {labels.map((item, index) => <Navigator className='label'
                  style={`border: 1Px solid ${dataColor.titleColor};color: ${dataColor.titleColor}`}
                  key={index}
                  url={item.url}
                ><Text>{item.name}</Text></Navigator>)}
                {
                  process.env.P_ENV === 'kd' && refundLabels.map((item, index) => <Navigator className='label'
                    style={`border: 1Px solid ${dataColor.titleColor};color: ${dataColor.titleColor}`}
                    key={index}
                  ><Text>{item}</Text></Navigator>)
                }
              </View>
            }
            {goodsLightspot && <View className='goodsLightspot'>
              {labels && labels.length > 0 && <View className='labels'>
                {labels.map((item, index) => <Navigator className='label'
                  style={`border: 1Px solid ${dataColor.titleColor};color: ${dataColor.titleColor}`}
                  key={index}
                  url={item.url}
                ><Text>{item.name}</Text></Navigator>)}
              </View>
              }
              <View className='goods-lightspot'>
                <Text selectable>{goodsLightspot}</Text>
              </View>
            </View>}
            {!!shareVolume && <View className='label-share'>
              {!!shareVolume && <View>{shareVolume}人分享</View>}
            </View> }
          </View>
        </Skeleton>
      </View>
    </View>
  )
}
ProductNameCar.defaultProps = {
  labels: [],
  subTitle: '',
  goodsLightspot: '',
  groupDetail: null,
  name: '',
  loading: false,
  isSeller: 0,
  goods: [{market_price: 999, price: 999, brokerage: 0, first_brokerage: 0}],
  no: ''
}

export default ProductNameCar
